﻿<!DOCTYPE html>
<html>
<head>
	<title>固城湖螃蟹大数据服务中心</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		  <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-app-capable" content="yes">
    <!-- 改变顶部状态条的颜色 -->
    <meta name="apple-mobile-app-status-bar-style" content="black">
    <!-- 页面描述 -->
    <meta name="description" content="">
    <!-- 页面关键词 -->
    <meta name="keywords" content="固城湖螃蟹大数据服务中心">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
	<!-- 引入 Bootstrap -->
	<link href="./css/bootstrap.min.css" rel="stylesheet">
	<link href="./css/main.css" rel="stylesheet">
	<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<!-- 包括所有已编译的插件 -->
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/echarts.common.min.js"></script>
	<script type="text/javascript" src="./js/jquery.yan.ui.3.0.js"></script>
	<script>
		$().ready(function () {

			var height = $(window).height();
			$(".fullHeightDiv").height(height);


			//产地分布图的宽度设置
			var orgainwidth = $(".orgain-box").width(); //margin-left向左移动了50px，所以宽度可以增加50
			$(".orgain-box").width(orgainwidth + 49);
			$(".orgain-box").height((height - 60) / 2);
			$(".orgain-type").width(($(".orgain-box").width() - 36));


			//echart 规格分布
			$(".guigefenbu-box").height((height - 60) / 2); //外层框大小
			$(".guigefenbu").width($(".guigefenbu").parent().width() - 36); //去除标题大小
			$(".guigefenbu").height($(".guigefenbu").parent().height());
			$("#guigechart").height($("#guigechart").parent().height() - 65); //图表大小
			$("#guigechart").width($("#guigechart").parent().width());
			guige(); //chart图


			//价格走势
			$(".price-box").height((height - 60) / 2 - 10);
			$("#pricechart").width($("#pricechart").parent().width() - 36);
			jiage(); //chart图
			setInterval(function () {
				//ajax请求roll.ashx
				$.ajax({
					url: "roll.ashx",
					async: true,
					dataType: 'json',
					success: function (data) {
						if (data.stat == 'ok') {

							showPx(data.value);
							//console.debug(data);
						} else {
							//	console.debug(data);
						}
					}
				});

			}, 1000);
		});



		var localOption = [
		{
			top: "52%",
			left: "32%" //固城湖
		},
		{
			top: "24%",
			left: "26%" //石臼湖
		},
		{
			top: "52%",
			left: "12%" //水阳江
		}

	];

	</script>
</head>
<body>
	<div class="main-warp clearfix">
		<div class="head">
			<div class="left-title">
				南京良庄农产品有限公司
				<br />
				<span>http://www.lzbest.com</span>
			</div>
			<div class="mid-title">
				<h1>
					固城湖螃蟹大数据服务中心</h1>
				<span>Gucheng lake Crab database service center</span>
			</div>
		</div>
		<div class="pangxie" style="display: none;">
			<img src="css/img/px.png" width="100%" height="100%" />
		</div>
		<div class="fullHeightDiv width50per">
		</div>
		<div class="width50per " style="">
			<div class="topfallbar col-xs-12">
			</div>
			<div class="halfHeightDiv orgain-box width50per">
				<div class="div-left-title">
					<div class="title">
						固城湖螃蟹产地分级
					</div>
				</div>
				<div class="orgain-type">
				</div>
			</div>
			<div class="halfHeightDiv guigefenbu-box width50per">
				<div class="div-left-title">
					<div class="title">
						固城湖螃蟹规格分布
					</div>
				</div>
				<div class="guigefenbu">
					<div id="guigechart">
					</div>
					<dl class="score">
						<dt>累计放养<span>（只）</span></dt>
						<dd>
							973600</dd>
					</dl>
					<dl class="score">
						<dt>已捕捞<span>（只）</span></dt>
						<dd>
							0</dd>
					</dl>
					<dl class="score">
						<dt>待捕捞<span>（只）</span></dt>
						<dd>
							973600</dd>
					</dl>
				</div>
			</div>
			<div class="clearfix">
			</div>
			<div class="halfHeightDiv price-box">
				<div class="div-left-title">
					<div class="title">
						固城湖螃蟹价格走势
					</div>
				</div>
				<div id="pricechart">
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<!-- 跳螃蟹 -->
<script>


	function showPx(i) {
		$(".pangxie").hide();
		$(".pangxie").css("top", localOption[i].top).css("left", localOption[i].left);
		$(".pangxie").show();

		$('.pangxie img').yanVhSlideSide();

		//$(".pangxie").effect("shake", {}, 500);
	}
	function GetRandomNum(Min, Max) {
		var Range = Max - Min;
		var Rand = Math.random();
		return (Min + Math.round(Rand * Range));
	}   
</script>
<!-- 价格 -->
<script>


	//价格图表
	function jiage() {
		var dataList;

		$.getJSON("./js/data.txt", function (data) {
			dataList = data;
			var option = {
				backgroundColor: '#05142B',
				tooltip: {
					trigger: 'axis'
				},
				title: {
					text: "此数据为2016年演示数据",
					textStyle: {
						color: "#ccc",
						fontSize: 4
					},
					top: '20px',
					right: '15px'
				},
				legend: {
					data: ['4两公', '3.5两母', '4.5两公', '3两母'],
					textStyle: {
						color: '#fff'
					}
				},

				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},

				xAxis: {
					axisLabel: {
						textStyle: {
							color: 'white',
							fontSize: '16'
						}
					},
					axisTick: { show: false },

					axisLine: {
						show: true
					},
					type: 'category',
					boundaryGap: false,
					data: []
				},
				yAxis: {
					axisLabel: {
						textStyle: {
							color: 'white',
							fontSize: '16'
						}
					},
					axisTick: { show: false }
				},
				series: [
					{
						name: '4两公',
						type: 'line',
						itemStyle: {
							normal: {
								color: "#495319"

							}

						},
						data: []
					},
					{
						name: '3.5两母',
						type: 'line',
						itemStyle: {
							normal: {
								color: "#A9490E"

							}

						},
						data: []
					},
					{
						name: '4.5两公',
						type: 'line',
						itemStyle: {
							normal: {
								color: "#383E61"

							}

						},
						data: []
					},
					{
						name: '3两母',
						type: 'line',
						itemStyle: {
							normal: {
								color: "#D93D3E"

							}

						},
						data: []
					}
				]
			};
			var i = 0;
			for (i = 0; i < 10; i++) {
				option.xAxis.data.push(dataList.timedate[i]);
				//'4两公', '3.5两母', '4.5两公', '3两母
				option.series[0].data.push(dataList.gong4[i]);
				option.series[1].data.push(dataList.mu35[i]);
				option.series[2].data.push(dataList.gong45[i]);
				option.series[3].data.push(dataList.mu3[i]);
			}
			var myChart = echarts.init(document.getElementById('pricechart'));
			myChart.setOption(option);

			// 循环控制数据
			setInterval(function () {

				option.xAxis.data.shift();
				option.xAxis.data.push(dataList.timedate[i]);

				option.series[0].data.shift();
				option.series[0].data.push(dataList.gong4[i]);

				option.series[1].data.shift();
				option.series[1].data.push(dataList.mu35[i]);

				option.series[2].data.shift();
				option.series[2].data.push(dataList.gong45[i]);

				option.series[3].data.shift();
				option.series[3].data.push(dataList.mu3[i]);

				myChart.setOption(option);

				if (i == dataList.timedate.length) {
					i = 0;
				} else {
					i++;
				}

			}, 1500);
		});


	}
</script>
<!-- 规格 -->
<script>
	//规格图表
	function guige() {
		var dataAxis = ["", "", "", "", "", "", ""];
		var config = {
			rotate: 90,
			align: 'left',
			verticalAlign: 'middle',
			position: 'insideBottom',
			distance: 10
		}



		var labelOption = {
			normal: {
				show: true,
				position: config.position,
				distance: config.distance,
				align: config.align,
				verticalAlign: config.verticalAlign,
				rotate: config.rotate,
				formatter: '{a}  {b}',
				fontSize: 5,
				rich: {
					name: {
						textBorderColor: 'white'
					}
				}
			}
		};

		var option = {
			backgroundColor: '#05142B',
			tooltip: {
				trigger: 'axis'
			},
			grid: {
				left: '1%',
				right: '1%',
				bottom: '0%',
				top: '1%',
				containLabel: true
			},

			xAxis: [{
				type: 'category',
				data: dataAxis,
				axisLabel: {
					inside: true,
					textStyle: {
						color: '#fff'
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLine: {
					show: false
				}
			}
			],
			yAxis: [{
				type: 'value',
				axisLabel: {
					formatter: ''
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				}
			}],
			series: [{
				name: '母蟹',
				type: 'bar',
				stack: '母',

				itemStyle: {
					normal: {
						barBorderColor: 'rgba(0,0,0,0)',
						color: 'rgba(0,0,0,0)'
					},
					emphasis: {
						barBorderColor: 'rgba(0,0,0,0)',
						color: 'rgba(0,0,0,0)'
					}
				},
				data: [
						{
							value: 200,
							name: '2.0以下',

							label: labelOption
						}, {
							value: 200,
							name: '2.0',
							label: labelOption

						}, {
							value: 200,
							name: '2.5',
							label: labelOption
						}, {
							value: 200,
							name: '3.0',
							label: labelOption
						}, {
							value: 200,
							name: '3.5',
							label: labelOption
						}, {
							value: 200,
							name: '4.0',
							label: labelOption
						}, {
							value: 200,
							name: '4.0以上',
							label: labelOption
						}
					]
			}, {
				name: '公蟹',
				type: 'bar',
				stack: '公',
				itemStyle: {
					normal: {
						barBorderColor: 'rgba(0,0,0,0)',
						color: 'rgba(0,0,0,0)'
					},
					emphasis: {
						barBorderColor: 'rgba(0,0,0,0)',
						color: 'rgba(0,0,0,0)'
					}
				},
				data: [{
					value: 200,
					name: '2.5以下',
					label: labelOption
				}, {
					value: 200,
					name: '2.5',
					label: labelOption
				}, {
					value: 200,
					name: '3.0',
					label: labelOption
				}, {
					value: 200,
					name: '3.5',
					label: labelOption
				}, {
					value: 200,
					name: '4.0',
					label: labelOption
				}, {
					value: 200,
					name: '4.5',
					label: labelOption
				}, {
					value: 200,
					name: '4.5以上',
					label: labelOption
				}]

			}, {
				name: '母蟹',
				type: 'bar',


				stack: '母',
				label: {
					normal: {
						show: true,
						position: 'top',
						color: "white",
						formatter: '{c}'
					}
				},

				data: [

						{
							value: 12688,


							itemStyle: {
								normal: {
									color: '#9370DB ',
									opacity: 0.6
								}
							}
						}, {
							value: 26121,
							name: '2.0',
							itemStyle: {
								normal: {
									color: '#800080',
									opacity: 0.6
								}
							}
						}, {
							value: 27521,
							name: '2.5',
							itemStyle: {
								normal: {
									color: '	#A51550',
									opacity: 0.6
								}
							}
						}, {
							value: 26121,
							name: '3.0',
							itemStyle: {
								normal: {
									color: 'orange',
									opacity: 0.6
								}
							}
						}, {
							value: 26121,
							name: '3.5',
							itemStyle: {
								normal: {
									color: '#9370DB',
									opacity: 0.6
								}
							}
						}, {
							value: 26121,
							name: '3.5',
							itemStyle: {
								normal: {
									color: '#800080',
									opacity: 0.6
								}
							}
						}, {
							value: 17774,
							name: '3.5以上',
							itemStyle: {
								normal: {
									color: '#A51550',
									opacity: 0.6
								}
							}
						},
					]
			}, {
				name: '公蟹',
				type: 'bar',
				stack: '公',

				label: {
					normal: {
						show: true,
						position: 'top',
						color: "white",
						formatter: '{c}'
					}
				},
				data: [{
					value: 15215,
					name: '2.0以下',
					itemStyle: {
						normal: {
							color: '#9370DB',
							opacity: 0.6

						}
					}
				}, {
					value: 23434,
					name: '2.0',
					itemStyle: {
						normal: {
							color: '#800080',
							opacity: 0.6
						}
					}
				}, {
					value: 22445,
					name: '2.5',
					itemStyle: {
						normal: {
							color: '	#A51550',
							opacity: 0.6
						}
					}
				}, {
					value: 28434,
					name: '3.0',
					itemStyle: {
						normal: {
							color: 'orange',
							opacity: 0.6
						}
					}
				}, {
					value: 23434,
					name: '3.5',
					itemStyle: {
						normal: {
							color: '#9370DB',
							opacity: 0.6
						}
					}
				}, {
					value: 23434,
					name: '4.0',
					itemStyle: {
						normal: {
							color: '#800080',
							opacity: 0.6
						}
					}
				}, {
					value: 17878,
					name: '4.0以上',
					itemStyle: {
						normal: {
							color: '#A51550',
							opacity: 0.6
						}
					}
				}]
			},

			]
		};
		var myChart = echarts.init(document.getElementById('guigechart'));
		myChart.setOption(option);
	};


</script>
